<!-- 该画面是：维护项目所有相关信息 -->
<template>
  <div>
    <div class="DescriptionTitle">{{ title }}</div>
    <!-- 维护项目基础报价信息 -->
    <el-table ref="table1" v-loading="loading" :data="projectMaintainList" border style="width: 100%" :default-sort="{ prop: 'quote_date', order: 'ascending' }">
      <el-table-column :label="$t('projectMaintainOrderNo')" prop="order_no" width="100" />
      <el-table-column :label="$t('quoteNo')" prop="quote_no" width="100" />
      <el-table-column :label="$t('projectMaintainName')" prop="project_name" width="250" show-tooltip-when-overflow />
      <el-table-column :label="$t('projectMaintainStatus')" prop="project_status_desc" align="center" width="80" />
      <el-table-column :label="$t('projectMaintainSalesDate')" prop="sales_date" align="center" width="120" />
      <el-table-column :label="$t('projectMaintainSalesAmount')" prop="sales_amount" align="right" width="120" />
      <el-table-column :label="$t('projectMaintainObj')" prop="procurement_obj" align="right" width="120" />
      <el-table-column :label="$t('projectMaintainaffect')" prop="procurement_affect" align="right" width="120" />
      <el-table-column :label="$t('projectMaintainQuoteDays')" prop="quoted_days" align="right" width="130" />
      <el-table-column :label="$t('projectMaintainQuoteHours')" prop="quoted_hours" align="right" width="130" />
      <el-table-column :label="$t('projectMaintainBudgetHours')" prop="bugdget_hours" align="right" width="130" />
      <el-table-column :label="$t('projectMaintainReserveHours')" prop="reserve_hours" align="right" width="130" />
      <el-table-column :label="$t('projectMaintainNote')" prop="note" min-width="220" show-tooltip-when-overflow />
      <el-table-column :label="$t('operate')" align="center" width="90" class-name="fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" :icon="isDetailVisible ? 'el-icon-close' : 'el-icon-view'" @click="handleDetail(scope.row)">{{ isDetailVisible ? $t('closeBtn') : $t('detailBtn') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; gap: 20px;">
      <div style="flex-basis: 40%;">
        <!-- 维护项目核算履历信息 -->
        <div class="DescriptionTitle">{{ $t('projectAccountHistory') }}</div>
        <el-table v-loading="loading" :data="maintainProjectAccountList" style="width: 100%; overflow-x: scroll;" :default-sort="{ prop: 'sales_date', order: 'ascending' }" border>
          <el-table-column :label="$t('projectMaintainSalesDate')" prop="sales_date" align="center" width="120" />
          <el-table-column :label="$t('maintainAccountSalesAmount')" prop="sales_amount" align="right" width="120" />
          <el-table-column :label="$t('maintainAccountAmount')" prop="amount" align="right" width="120" />
          <el-table-column :label="$t('maintainAccountProfitLoss')" prop="profit_loss" align="right" width="120" />
          <el-table-column :label="$t('projectMaintainNote')" prop="note" min-width="220" show-tooltip-when-overflow />
        </el-table>
      </div>
      <div style="flex-basis: 60%;">
        <!-- 维护项目阶段别预实管理信息 -->
        <div class="DescriptionTitle">{{ $t('projectStageHistory') }}</div>
        <el-table v-loading="loading" :data="maintainProjectStageList" style="width: 100%; overflow-x: scroll;" :default-sort="{ prop: 'sales_date', order: 'ascending' }" border>
          <el-table-column :label="$t('projectMaintainSalesDate')" prop="sales_date" align="center" width="120" />
          <el-table-column :label="$t('projectMaintainQuoteDays')" prop="quoted_hours" align="right" width="120" />
          <el-table-column :label="$t('projectMaintainBudgetHours')" prop="bugdget_hours" align="right" width="120" />
          <el-table-column :label="$t('maintainStageActualHours')" prop="actual_hours" align="right" width="120" />
          <el-table-column :label="$t('maintainStageMarginHours')" prop="margin_hours" align="right" width="120" />
          <el-table-column :label="$t('projectMaintainNote')" prop="note" min-width="220" show-tooltip-when-overflow />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectMaintainListApi, getProjectMaintainAccountApi, getProjectMaintainStageApi } from '@/views/project/projectmaintain/api/projectmaintain.api';

export default {
  name: 'ProjectMaintainInfo',
  props: {
    title: {
      type: String,
      default: ''
    },
    projectPlanId: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      isDetailVisible: false,
      queryparams: {
        projectPlanFK: undefined
      },
      maintainparams: {
        projectMaintainFK: undefined
      },
      projectMaintainList: [],
      maintainProjectAccountList: [],
      maintainProjectStageList: [],
      loading: false
    };
  },
  mounted() {
    this.$watch(() => {
      return this.projectPlanId;
    }, async(newValue) => {
      this.queryparams.projectPlanFK = newValue;
      await this.getMaintainProjectList();
    }, { immediate: true })
  },
  methods: {
    // 获取维护项目信息
    async getMaintainProjectList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.projectPlanId
      var resp = await getProjectMaintainListApi({ ...this.queryparams })
      if (resp.success && resp.data.results.length > 0) {
        this.projectMaintainList = resp.data.results
      } else {
        this.projectMaintainList = []
      }
      this.loading = false
    },
    handleDetail(row) {
      this.isDetailVisible = !this.isDetailVisible;// 切换显示状态
      if (this.isDetailVisible) {
        this.getMaintainProjectAccount(row)
        this.getMaintainProjectStage(row)
      } else {
        this.maintainProjectAccountList = [] // 清空数据
        this.maintainProjectStageList = []
      }
    },
    // 获取维护项目核算履历信息
    async getMaintainProjectAccount(row) {
      this.loading = true
      this.maintainparams.projectMaintainFK = row.id
      var resp = await getProjectMaintainAccountApi({ ...this.maintainparams })
      if (resp.success && resp.data.results.length > 0) {
        this.maintainProjectAccountList = resp.data.results
      } else {
        this.maintainProjectAccountList = []
      }
      this.loading = false
    },
    // 获取维护项目阶段别预实管理信息
    async getMaintainProjectStage(row) {
      this.loading = true
      this.maintainparams.projectMaintainFK = row.id
      var resp = await getProjectMaintainStageApi({ ...this.maintainparams })
      if (resp.success && resp.data.results.length > 0) {
        this.maintainProjectStageList = resp.data.results
      } else {
        this.maintainProjectStageList = []
      }
      this.loading = false
    }
  }
}
</script>

  <style scoped>
  .DescriptionTitle {
    margin: 10px 0;
    font-size: 16px;
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

  div .DescriptionDiv {
    float: left;
    box-sizing: border-box;
    border-left: 10px solid transparent;
  }

  div .DescriptionWidth25 {
    width: 25%
  }

  div .DescriptionWidth50 {
    width: 50%
  }

  div .DescriptionWidth75 {
    width: 75%
  }

  div .DescriptionWidth100 {
    width: 100%
  }

  div .DescriptionDivMarginLeftRemove {
    margin-left: -10px;
  }

  .label-with-150 {
    width: 150px;
  }

  </style>
